<template>
	<!-- 赛事 -->
	<scroll-view scroll-y="true" class="bgWhite">
		<!-- 搜索 -->
		<view class="topSearch flexBetween">
			<!-- <uni-search-bar style="width: 550rpx;" @clear="onclear()" @confirm="onconfirm()" clearButton="auto" cancelButton="none" v-model="queryParam.name"></uni-search-bar>
			<view class="uni-input" @click="openPicker">{{projectName?projectName:'全部'}} <uni-icons type="bottom" size="16"></uni-icons></view>
			<uv-picker ref="picker" cancelColor="#fff" confirmColor="#fff" round="15" :columns="[projectList]"  keyName="name" @confirm="changeProject"></uv-picker> -->
		 <!-- 	<picker style="width: 180rpx;" @change="changeProject" :value="index" :range="projectList" range-key="name">
		 		<view class="uni-input" @click="pickerShow">{{projectName?projectName:'全部'}} 
		 			<uni-icons type="bottom" size="16"></uni-icons>
		 		</view>
		 	</picker> -->
		   <view class="flexStart t-left">
				<view class="flexStart">
					<i class="iconfont icon-huopinleixing-"></i>
					<view class="uni-input" @click="openPicker">{{projectName?projectName:'全部'}} <uni-icons type="bottom" size="16"></uni-icons></view>
					<uv-picker ref="picker" cancelColor="#fff" confirmColor="#fff" round="15" :columns="[projectList]"  keyName="name" @confirm="changeProject"></uv-picker>
				</view>
				<view class="line flexStart">
					<i class="iconfont icon-24gl-calendar"></i>
					<view class="uni-input" @click="openPicker1">{{month?month:'全部'}} <uni-icons type="bottom" size="16"></uni-icons></view>
					<uv-picker ref="picker1" cancelColor="#fff" confirmColor="#fff" round="15" :columns="[monthList]"   @confirm="changeProject1"></uv-picker>
				</view>
		   </view>
		   <view class="t-right"><i class="iconfont icon-weizhi"></i></view>
		</view>
		<view class="segmentedBox flex" >
			<!-- <uni-segmented-control :current="current" :values="items" style-type="button" :active-color="activeColor" @clickItem="onClickItem" /> -->
		 <view  v-for="(item,index) in items" :key="index" @click="()=>onClickItem(index)" :class="current==index?'segmentedItem active':'segmentedItem'">{{item}}</view>
		</view>
		<view class="content">
			<view>
				<view class="matchList">
					
					<view class="matchItem" @click="goSingle(item)" v-for="(item, index) in list" :key="index">
						<view class="name">{{item.name}}</view>
						<view class="flex">
							<view class="leftImg">
								
								<image mode="aspectFit" :src="item.coverUrl"></image>
							</view>		
							<view class="rightWen">
								<text class="mr20 status type2" v-if="item.type==0">独立赛</text>
								<text class="mr20 status type1" v-if="item.type==1">联赛</text>
								<!-- 1 报名未开始 2 报名进行中 3 即将开始 4 进行中 5已经结束 -->
								<text class="status s01" v-if="item.progressStatusCode==3">即将开始</text>
								<text class="status s02" v-if="item.progressStatusCode==2">报名中</text>
								<text class="status s03" v-if="item.progressStatusCode==4">进行中</text>
								<text class="status s04" v-if="item.progressStatusCode==5">已结束</text>
								<text class="status s04" v-if="item.progressStatusCode==1">报名未开始</text>
								<view class="time" v-if="item.type==0">报名截止：{{item.signEndTime.substring(0, 10)}}</view>
								<view class="time" v-else>比赛开始时间：{{item.beginTime.substring(0, 10)}}</view>
								<view class="time" v-if="item.type==1">比赛结束时间：{{item.endTime.substring(0, 10)}}</view>
							</view>
						</view>
	
					</view>
				
					<view class="nodata" v-if="list.length==0">
						<image mode="aspectFit" src="/static/nodata.png"></image>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
import { reactive, toRefs, getCurrentInstance } from 'vue';
import * as match from '@/common/match.js';
import {onShow,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app';
import _ from 'lodash';
const app = getApp();
const { proxy } = getCurrentInstance();
const data = reactive({
	// 1 报名未开始 2 报名进行中 3 即将开始 4 进行中 5已经结束
	items: ['全部', '报名中', '进行中', '即将开始','已结束'],
	activeColor:'#16C682',
	queryParam: {
		projectId:'',
		progressStatusCode:'',
		name:'',
		month:''
	},
	current: 0,
	index: 0,
	list: [],
	projectList:[],
	projectName:'',
	show:false,
	month:'',
	monthList:['全部']
});
const { items,activeColor, queryParam, current, index,list,projectList,projectName,show,fieldValue,monthList,month } = toRefs(data);
onShow(option =>{
	projectList.value = []
	if (app.globalData.isLogin) {
		getProjectList()
		getList();
		getMonthList()
	} else {
		app.firstLoadCallback = () => {
			getProjectList()
			getList();
			getMonthList()
		};
	}
	  
})
function getMonthList() {
   const date = new Date()
  const arr = ['全部']
  // 获取年
  let year =date.getFullYear()
  // 获取月
  let mon =date.getMonth() - 5
  if (mon < 1) {
    year = year - 1
    mon = 12 + mon
  }
  for (var i = 0; i <= 11; i++) {
    if (++mon > 12) {
      mon = 1
      year++
    }
    if (mon < 10) {
      mon = '0' + mon
    }
    // console.log(year + '-' + mon)
    arr.push(year + '-' + mon)
  }
  monthList.value = arr
}
function openPicker1() {
				proxy.$refs.picker1.open();
			}
function openPicker() {
				proxy.$refs.picker.open();
			}
function pickerShow(){
	show.value=true
}
function getProjectList(){
	match.getBaseProject().then(res=>{
		projectList.value = res.rows
		let obj = {
			id:'',
			name:'全部'
		}
		projectList.value.unshift(obj)
	})
	// projectList.value =_.cloneDeep(app.globalData.venue.projectList);

}
function getList() {
	match.getMaList(queryParam.value).then(res => {
		list.value = res.rows;
	});
}
function changeProject(e){
	index.value = e.indexs[0]
	projectName.value = projectList.value[index.value].name
	queryParam.value.projectId = projectList.value[index.value].id
	getList()
}
function changeProject1(e){
	month.value = e.value[0]
	// projectName.value = projectList.value[index.value].name
	 queryParam.value.month = e.value[0]=='全部'?'': e.value[0]
	 getList()
}
function onclear(){
	queryParam.value.name = ''
	getList()
}
function onconfirm(){
	console.log(queryParam.value.name)
	getList()
}

function onClickItem(e) {
	current.value = e;
	if(current.value==1){
		queryParam.value.progressStatusCode = '2';
	}else if(current.value==2){
		queryParam.value.progressStatusCode = '4';
	}else if(current.value==3){
		queryParam.value.progressStatusCode = '3';
	}else if(current.value==4){
		queryParam.value.progressStatusCode = '5';
	}else {
		// 全部
		queryParam.value.progressStatusCode = ''
	}
	getList()
}
function goSingle(item) {
	if(item.type==0){
		let path = `/pages_match/match/single?id=${item.id}`;
		uni.navigateTo({
			url: path
		});
	} else {
		// 联赛
		let path = `/pages_match/match/singleLs?id=${item.id}`;
		uni.navigateTo({
			url: path
		});
	}

}
</script>

<style lang="scss" scoped>
.bgWhite {height:100%;background: linear-gradient(to bottom, $uni-color-primary 20%, #f38c8c 50%, #eefbf5 100%);}
.topSearch{ display: flex; align-items: center;padding:15rpx 25rpx;box-sizing: border-box;}
.t-left{
	width:610rpx;
	background:#fff;
	border-radius:30rpx;
	.flexStart{
		width:50%;
		justify-content: center;
	}
	.line{
		position: relative;
		&::before {
		        position: absolute; /*绝对定位*/
		        top: 50%; /*Y轴方向偏移自身高度的50%*/
		        transform: translatey(-40%); /*Y轴方向偏移微调*/
		        left:0; /*紧靠容器左边缘*/
		        content: ''; /*伪元素需要有内容才能显示*/
		        width: 2px; /*伪元素宽度*/
		        height: 18px; /*伪元素高度*/
		        background-color: $uni-color-primary; /*伪元素颜色*/
		
		     }
	}
	.iconfont{
		margin-right:15rpx;
		font-size:20px;
	}
	
}
.t-right{
	background:#fff;
	border-radius:50%;
	color:$uni-color-primary;
	width:70rpx;
	text-align:center;
	height:70rpx;
	line-height: 70rpx;
}
.uni-input{
	box-sizing:border-box;
	height:72rpx;
	// line-height:72rpx;
	padding:0;
	text-align: center;
	// width:180rpx!important;
	background:#fff;
	display:flex;
	justify-content: flex-start;
	align-items:center;
	border-radius:10px;
	flex:none;
}

:deep(.uv-toolbar){
	background:$uni-color-primary!important;
}
:deep(.uv-picker__view__column){
	text:nth-child(even){
		background:#f6c9c3;
	}
}
</style>
